<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<!-- 组合式API 计算属性, 计算属性必须是同步的，不能异步 -->

<body>
    <div id="app">

    </div>
</body>
<script src="js/vue.js"></script>
<script>

    const app = Vue.createApp({
        setup(props, context) {
            const { ref, computed } = Vue;

            // 常用的基本数据类型
            let num = ref(10);

            // 计算属性
            let num1 = computed(() => {
                console.log("-------computed---------");
               return num.value * 10;
            });

            const add = () => {
                console.log("-------add------");
                return num.value += 10; 
            };

            return {
                num, num1, add
            }
        },
        template: `
            <div>
                <p>原始值：{{num}}</p>
                <p>计算属性：{{num1}}</p>
                <p>计算属性：{{num1}}</p>
                <p>计算属性：{{num1}}</p>
                <p>计算属性：{{num1}}</p>
                <p>-----------------------</p>
                <button @click="add">点击</button>
            </div>
        `
    }).mount("#app");

</script>

</html>
